<script setup>
import { Clock, Bell, User, List } from '@element-plus/icons-vue'

const notices = [
  { title: '系统维护通知', content: '将于2024-02-01 00:00至03:00进行系统维护', time: '2024-01-28' },
  { title: '版本更新公告', content: 'V2.1.0 版本已发布，新增数据分析模块', time: '2024-01-25' },
  { title: '春节放假通知', content: '2024-02-09至2024-02-15为春节假期', time: '2024-01-20' },
]

const stats = [
  { title: '今日访问量', value: '2,456', color: 'linear-gradient(45deg, #409EFF, #79BBFF)' },
  { title: '新增用户', value: '189', color: 'linear-gradient(45deg, #67C23A, #95D475)' },
  { title: '待办事项', value: '12', color: 'linear-gradient(45deg, #E6A23C, #EEBE77)' },
  { title: '系统消息', value: '3', color: 'linear-gradient(45deg, #F56C6C, #F89898)' },
]
</script>

<template>
  <el-container class="h-screen">


    <el-container>
      <!-- 头部 -->
      <el-header class="flex items-center justify-between border-b">
        <div class="text-xl font-bold text-blue-600">管理系统</div>
        <div class="flex items-center gap-4">
          <el-badge :value="3" class="mt-2">
            <el-icon :size="20"><Bell /></el-icon>
          </el-badge>
          <el-avatar :size="32" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
        </div>
      </el-header>

      <!-- 主内容 -->
      <el-main class="bg-gray-50 p-6">
        <!-- 统计卡片 -->
        <el-row :gutter="20">
          <el-col
              v-for="(item, index) in stats"
              :key="index"
              :xs="24" :sm="12" :md="6"
          >
            <el-card
                class="stat-card"
                :style="{ background: item.color }"
                shadow="hover"
            >
              <div class="text-white">
                <div class="text-lg mb-2">{{ item.title }}</div>
                <div class="text-3xl font-bold">{{ item.value }}</div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <!-- 公告栏 -->
        <el-card class="mt-6" shadow="never">
          <template #header>
            <div class="flex items-center">
              <el-icon class="mr-2"><Clock /></el-icon>
              <span class="font-bold">最新公告</span>
            </div>
          </template>

          <el-timeline>
            <el-timeline-item
                v-for="(notice, index) in notices"
                :key="index"
                :timestamp="notice.time"
                placement="top"
                type="primary"
                icon="el-icon-message-solid"
            >
              <el-card shadow="hover">
                <h4 class="text-blue-600">{{ notice.title }}</h4>
                <p class="mt-2 text-gray-600">{{ notice.content }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
.stat-card {
  transition: transform 0.3s;
  margin-bottom: 20px;
  border: none;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.el-timeline-item__wrapper {
  padding-left: 20px;
}

.el-timeline-item__timestamp {
  color: #666;
  font-size: 14px;
}
</style>